<template>
  <div class="h-[calc(100vh-45px)] bg-red-50">
    <div class="h-[30%] flex flex-col justify-center items-center">
      <nut-avatar size="large">
        <image
          class="w-10 h-10 rounded-full object-cover"
          src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
        />
      </nut-avatar>
      <div class="text-center mt-2">{{ username }}</div>
    </div>
    <div class="flex gap-2">
      <template v-if="usertype === 'customer'">
        <nut-button
          shape="square"
          size="large"
          class="my-button flex-1 px-4"
          @click="gopersonalInformation('personalInformation/index')"
        >
          <div class="flex justify-center items-center w-full">
            <div>个人信息</div>
          </div>
        </nut-button>
        <nut-button
          shape="square"
          size="large"
          class="my-button flex-1"
          @click="gopersonalInformation('/pages/modules/user/release/index')"
        >
          <div class="flex justify-between items-center w-full px-4">
            <div>发布需求</div>
          </div>
        </nut-button>
      </template>
      <template v-else>
        <nut-button
          shape="square"
          size="large"
          class="my-button"
          @click="gopersonalInformation('personalInformation/index')"
        >
          <div class="flex justify-between items-center w-full px-4">
            <div>个人信息</div>
            <div class="text-gray-400">></div>
          </div>
        </nut-button>
      </template>
    </div>
    <nut-button shape="square" size="large" class="my-button" @click="gopersonalInformation('ReservationOrder/index')">
      <div class="flex justify-between items-center w-full px-4">
        <div>历史订单</div>
        <div class="text-gray-400">></div>
      </div>
    </nut-button>
    <nut-button
      v-if="usertype === 'customer'"
      shape="square"
      size="large"
      class="my-button"
      @click="gopersonalInformation('browsing/index')"
    >
      <div class="flex justify-between items-center w-full px-4">
        <div>历史浏览</div>
        <div class="text-gray-400">></div>
      </div>
    </nut-button>
    <nut-button shape="square" size="large" class="my-button" @click="gopersonalInformation('historycomplain/index')">
      <div class="flex justify-between items-center w-full px-4">
        <div>{{ usertype === "customer" ? "历史投诉" : "查看投诉" }}</div>
        <div class="text-gray-400">></div>
      </div>
    </nut-button>
    <nut-button
      shape="square"
      size="large"
      class="my-button"
      @click="gopersonalInformation('/pages/modules/user/login/index')"
    >
      <div class="flex justify-between items-center w-full px-4">
        <div>退出</div>
        <div class="text-gray-400">></div>
      </div>
    </nut-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { uerPersonStore } from "@/store/modules/person";
const { reset } = uerPersonStore();
const username = ref(uni.getStorageSync("username"));
const usertype = ref(uni.getStorageSync("usertype"));

const gopersonalInformation = (path: any) => {
  reset();
  if (path === "/pages/modules/user/login/index") {
    // 清空本地存储
    uni.clearStorageSync();
    // 重置 store
    reset();
  }
  uni.navigateTo({
    url: path,
  });
};
</script>

<style scoped>
.my-button {
  margin: 8rpx 0;
  background-color: white !important;
}

:deep(.nut-button) {
  border: none !important;
  padding: 0 !important;
}
</style>
